<template>
  <div class="url-encoder">
    <div class="page-header">
      <h1>URL 编码/解码</h1>
      <p>对URL字符串进行百分比编码和解码处理</p>
    </div>
    
    <div class="tool-container">
      <div class="input-section">
        <div class="input-group">
          <label for="input-text">输入文本:</label>
          <textarea 
            id="input-text"
            v-model="inputText" 
            placeholder="请输入需要编码或解码的URL字符串..."
            rows="6"
          ></textarea>
        </div>
        
        <div class="button-group">
          <button @click="encodeUrl" class="btn btn-primary">
            <span class="btn-icon">🔒</span>
            URL 编码
          </button>
          <button @click="decodeUrl" class="btn btn-secondary">
            <span class="btn-icon">🔓</span>
            URL 解码
          </button>
          <button @click="clearAll" class="btn btn-outline">
            <span class="btn-icon">🗑️</span>
            清空
          </button>
        </div>
      </div>
      
      <div class="output-section">
        <div class="output-group">
          <label for="output-text">输出结果:</label>
          <textarea 
            id="output-text"
            v-model="outputText" 
            placeholder="编码或解码结果将显示在这里..."
            rows="6"
            readonly
          ></textarea>
        </div>
        
        <div class="action-group">
          <button @click="copyResult" class="btn btn-success" :disabled="!outputText">
            <span class="btn-icon">📋</span>
            复制结果
          </button>
          <button @click="swapInputOutput" class="btn btn-outline" :disabled="!outputText">
            <span class="btn-icon">🔄</span>
            交换输入输出
          </button>
        </div>
      </div>
    </div>
    
    <div class="info-section">
      <div class="info-card">
        <h3>使用说明</h3>
        <ul>
          <li><strong>URL编码:</strong> 将特殊字符转换为百分比编码格式（如空格转为%20）</li>
          <li><strong>URL解码:</strong> 将百分比编码转换回原始字符</li>
          <li><strong>常见用途:</strong> 处理URL参数、表单数据传输等</li>
        </ul>
      </div>
      
      <div class="example-card">
        <h3>示例</h3>
        <div class="example-item">
          <div class="example-label">原始文本:</div>
          <div class="example-text">Hello World! 你好世界</div>
        </div>
        <div class="example-item">
          <div class="example-label">编码后:</div>
          <div class="example-text">Hello%20World!%20%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputText = ref('')
const outputText = ref('')

const encodeUrl = () => {
  if (!inputText.value.trim()) {
    alert('请输入要编码的文本')
    return
  }
  
  try {
    outputText.value = encodeURIComponent(inputText.value)
  } catch (error) {
    alert('编码失败，请检查输入内容')
  }
}

const decodeUrl = () => {
  if (!inputText.value.trim()) {
    alert('请输入要解码的文本')
    return
  }
  
  try {
    outputText.value = decodeURIComponent(inputText.value)
  } catch (error) {
    alert('解码失败，请检查输入内容是否为有效的URL编码')
  }
}

const clearAll = () => {
  inputText.value = ''
  outputText.value = ''
}

const copyResult = async () => {
  if (!outputText.value) return
  
  try {
    await navigator.clipboard.writeText(outputText.value)
    alert('结果已复制到剪贴板')
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = outputText.value
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    alert('结果已复制到剪贴板')
  }
}

const swapInputOutput = () => {
  const temp = inputText.value
  inputText.value = outputText.value
  outputText.value = temp
}
</script>

<style scoped>
.url-encoder {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-header h1 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.page-header p {
  color: #7f8c8d;
  font-size: 1.1rem;
}

.tool-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.input-section,
.output-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e8ed;
}

.input-group,
.output-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #2c3e50;
}

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
}

textarea:focus {
  outline: none;
  border-color: #3498db;
}

textarea[readonly] {
  background-color: #f8f9fa;
  cursor: default;
}

.button-group,
.action-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2980b9;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #7f8c8d;
}

.btn-success {
  background: #27ae60;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #229954;
}

.btn-outline {
  background: transparent;
  color: #7f8c8d;
  border: 2px solid #e1e8ed;
}

.btn-outline:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #bdc3c7;
}

.btn-icon {
  font-size: 1rem;
}

.info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.info-card,
.example-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e8ed;
}

.info-card h3,
.example-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.info-card ul {
  list-style: none;
  padding: 0;
}

.info-card li {
  margin-bottom: 0.75rem;
  padding-left: 1rem;
  position: relative;
  color: #5a6c7d;
  line-height: 1.5;
}

.info-card li::before {
  content: '•';
  color: #3498db;
  position: absolute;
  left: 0;
}

.example-item {
  margin-bottom: 1rem;
}

.example-label {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.example-text {
  font-family: 'Consolas', 'Monaco', monospace;
  background: #f8f9fa;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  word-break: break-all;
  color: #5a6c7d;
}

@media (max-width: 768px) {
  .tool-container,
  .info-section {
    grid-template-columns: 1fr;
  }
  
  .button-group,
  .action-group {
    justify-content: center;
  }
}

@media (prefers-color-scheme: dark) {
  .page-header h1 {
    color: #ecf0f1;
  }
  
  .page-header p {
    color: #bdc3c7;
  }
  
  .input-section,
  .output-section,
  .info-card,
  .example-card {
    background: #34495e;
    border-color: #4a5f7a;
  }
  
  label {
    color: #ecf0f1;
  }
  
  textarea {
    background: #2c3e50;
    color: #ecf0f1;
    border-color: #4a5f7a;
  }
  
  textarea[readonly] {
    background-color: #2c3e50;
  }
  
  textarea:focus {
    border-color: #3498db;
  }
  
  .info-card h3,
  .example-card h3 {
    color: #ecf0f1;
  }
  
  .info-card li {
    color: #bdc3c7;
  }
  
  .example-label {
    color: #ecf0f1;
  }
  
  .example-text {
    background: #2c3e50;
    color: #bdc3c7;
  }
  
  .btn-outline {
    color: #bdc3c7;
    border-color: #4a5f7a;
  }
  
  .btn-outline:hover:not(:disabled) {
    background: #2c3e50;
    border-color: #7f8c8d;
  }
}
</style>